import { useEffect } from "react"


function Clock() {


  let timeId = null

  useEffect(() => {

    var canvas = document.createElement('canvas')
    document.body.appendChild(canvas)
    canvas.width = 500
    canvas.height = 500
    canvas.style.cssText = 'position:absolute;top:-10%;left:-5%;z-index:0;transform: scale(0.7)'

    var ctx = canvas.getContext('2d')
    ctx.style = 'black'
    ctx.lineWidth = 1

    // 表盘
    function drawCircle (lc,fc, r, w = 1) {
      ctx.beginPath(0,0)
      ctx.save()
      ctx.lineWidth = w
      ctx.shadowBlur = 10
      ctx.shadowColor = lc
      ctx.shadowOffsetX = 1;
      ctx.shadowOffsetY = 1;
      ctx.strokeStyle = lc
      ctx.arc(250,250,r,360/180*Math.PI,0/180*Math.PI,true)
      ctx.closePath()
      ctx.stroke()
      ctx.fillStyle = fc
      ctx.fill()
      ctx.restore()
    }

    
    // 秒针
    function drawLine (deg, width = 1, length = 180, color = '#000', type) {
      deg -= 180
      // ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
      ctx.beginPath(0,0)
      ctx.save()
      ctx.translate(250,250)
      ctx.rotate(deg*Math.PI/180)
      ctx.translate(10,-10)
      ctx.lineCap = 'round'
      ctx.lineWidth = width
      ctx.strokeStyle = color
      ctx.shadowBlur = 10
      ctx.shadowColor = color
      ctx.shadowOffsetX = 3;
      ctx.shadowOffsetY = 3;
      ctx.moveTo(-10,-10)
      if (type === 's') {
        ctx.lineTo(-10,3)
        ctx.moveTo(-10,16)
      }
      ctx.lineTo(-10,length)
      ctx.moveTo(-10,length)
      ctx.lineTo(-20, length-15)
      ctx.moveTo(-10,length)
      ctx.lineTo(0, length-15)
      ctx.stroke()
      ctx.closePath()
      ctx.restore()
      
      ctx.save()
      ctx.beginPath(0,0)
      ctx.strokeStyle = color
      if (type === 's') {
        ctx.arc(250,250,6,360/180*Math.PI,0/180*Math.PI,true)
        ctx.fillStyle = 'transparent'
      } else if (type === 'h'){
        ctx.arc(250,250,10,360/180*Math.PI,0/180*Math.PI,true)
        ctx.fillStyle = color
      }
      ctx.stroke()
      ctx.fill()
      ctx.closePath()
      ctx.restore()
    }
    
    // 文字
    function addText(deg) {
      let text = '12'
      if (deg !== 0) {
        text = deg/30
      }
      deg -= 90
      ctx.save()
      ctx.translate(250,255)
      ctx.font = '30px 微软雅黑'
      // ctx.strokeText('hah',200, 100)
      ctx.textAlign = 'center'
      ctx.textBaseline="middle"
      ctx.shadowBlur = 1
      ctx.shadowColor = 'balck'
      ctx.shadowOffsetX = 3;
      ctx.shadowOffsetY = 3;
      ctx.fillText(text,170 * Math.cos(2*Math.PI/360*deg), 170 * Math.sin(2*Math.PI/360*deg))
      ctx.restore()
    }
    addText()

    // 刻度
    function scale(deg, l, w, r = 200, color = 'black') {
      deg -= 90
      let x = 2*Math.PI/360*deg
      ctx.beginPath()
      ctx.save()
      r !== 200 && (ctx.strokeStyle = color)
      ctx.lineWidth = w
      ctx.shadowBlur = 13
      ctx.shadowColor = color
      ctx.shadowOffsetX = 2;
      ctx.shadowOffsetY = 2;
      ctx.moveTo(250 + (r - l) * Math.cos(x),250 + (r - l) * Math.sin(x))
      ctx.lineTo(250 + r * Math.cos(x),250 + r * Math.sin(x))
      // console.log(Math.cos(x), Math.sin(x));
      ctx.stroke()
      ctx.restore()
    }
    // scale(0)
    // ctx.scale(2,2)
    // let c = 0
    // let r = 0
    // let a = 0
    function randomColor () {
      let r = Math.random()*255
      let g = Math.random()*255
      let b = Math.random()*255
      return `rgb(${r},${g},${b})`
    }
    let color = randomColor()
    // 启动
    function timeStart() {
      let date = new Date()
      let second = date.getSeconds() * 6
      let minute = date.getMinutes() * 6 + date.getSeconds() * 6 / 60
      let hour = date.getHours() * 30 + date.getMinutes() * 6 / 12
      ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
      drawCircle('#000', 'transparent', 205, 5)
      drawCircle('#000', 'transparent', 200)
      // drawCircle('#fff', '#fff', 180)
      drawLine(hour, 5, 100, 'black', 'h')
      drawLine(minute, 4, 150, 'skyblue')
      drawLine(second,undefined,undefined,'red', 's')
      ctx.font = '20px 微软雅黑'
      ctx.fillText(`${date.getHours()}:${date.getMinutes().toString().padStart(2,'0')}:${date.getSeconds().toString().padStart(2,'0')}` ,220, 200)
      for (let i = 0; i < 360; i++) {
        if (i % 6 === 0) {
          if (i % 90 === 0) {
            scale(i, 10, 4)
            addText(i)
          } else if (i % 30 === 0) {
            addText(i)
            scale(i, 10, 2)
          } else {
            scale(i, 5, 1)
          }
        }
        scale(i, 15, 1, 230, color)
      }
      let hc = randomColor()
      drawHeart(40,0,-45,hc)
      drawHeart(370,0,45,hc)
    }

    function drawC(positionX,positionY, r, color) {
      ctx.save()
      ctx.beginPath(0,0)
      ctx.arc(positionX, positionY, r, 360/180*Math.PI, 0/180*Math.PI, true)
      ctx.closePath()
      ctx.fill()
      ctx.restore()
    }

    function drawHeart(positionX = 0, positionY = 0, rotate, color) {
      ctx.save()
      ctx.translate(positionX + 45, positionY + 80)
      ctx.rotate((rotate + 225)*Math.PI/180)
      ctx.fillStyle = color
      drawC(25,50, 25)
      drawC(50,25, 25)
      ctx.beginPath(0,0)
      ctx.rect(0,0,50,50)
      ctx.closePath()
      ctx.fill()
      ctx.restore()
    }

    timeStart()
    timeId = setInterval(() => {
      timeStart()
    }, 1000);

    return () => {
      canvas.remove()
      clearInterval(timeId)
    }
  },[])
  return <>
  
  </>
}

export default Clock